<template>
  <div class="box">
    <div class="hedr">
      <div class="title">{{ title }}</div>
      <div class="r">
        <!-- <img src="/static/icon/arrow_top.png" @click="clickContract" />
        <img src="/static/icon/del.png" @click="clickClose" /> -->
        <el-icon :size="20" @click="clickClose">
          <Close />
        </el-icon>
      </div>
    </div>
    <transition-group appear name="animate__animated animate__bounce" enter-active-class="animate__flipInX"
      leave-active-class="animate__flipOutX">
      <div class="con" v-if="showCon">
        <slot></slot>
      </div>
    </transition-group>
  </div>
</template>
<script setup>
import { ref, computed } from 'vue'
// const emit = defineEmits([''])
const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  lPopShow: {
    type: Boolean,
    default: false
  }
  // lPwidth: {
  //     type: String,
  //     default: '200px'
  // }
})
const showCon = ref(true)
const emit = defineEmits(['update:lPopShow'])
const lPopShow = computed({
  get: () => props.lPopShow,
  set: (val) => {
    emit('update:lPopShow', val)
  }
})
const clickClose = () => {
  lPopShow.value = false
  emit('drawToolClearn', true)
}
const clickContract = () => {
  showCon.value = !showCon.value
}
</script>
<style lang="scss" scoped>
.box {
  padding: 10px;
  // background: url(/static/img/icon01.png) no-repeat;
  background: url('/static/img/icon05.png') no-repeat;
  background-size: 100% 100%;
  // background-size: 100% 100%;
  min-width: 270px;
  // background-color: #fff;
  // height: 200px;
  position: fixed;
  left: 20px;
  top: 100px;
  border-radius: 5px;
  overflow: hidden;
  z-index: 200;

  // width: 430px;
  // min-width: 430px;
  // padding-right: 6px;
  .hedr {
    display: flex;
    justify-content: center;
    align-items: center;
    // padding: 5px;
    color: #fff;
    width: 100%;
    position: relative;

    // border-bottom: 1px solid #ededed;
    // background-color: #5083ac;
    .title {
      // background: url(/static/img/k_db.png) no-repeat;
      background-size: 100% 100%;
      width: 100%;
      height: 36px;
      line-height: 36px;
      padding-left: 10px;
      font-size: 18px;
      // text-align: center;
    }

    .r {
      position: absolute;
      right: 10px;
      top: 5px;
      cursor: pointer;

      img {
        width: 25px;
        height: 25px;
        margin: 0 3px;
      }
    }
  }

  .con {
    padding: 0 10px;
    // background-color: #fff;
    // height: 600px;
    min-height: 200px;
    max-height: 600px;
    overflow: hidden;
    overflow-y: scroll;
  }

  .con::-webkit-scrollbar {
    display: none;
    /* Chrome Safari */
  }
}
</style>
